<template>
  <div id="invReaStDiv">
    <Breadcrumb content="库存查询" />
    <div class="bodyContent">
      <vxe-form :data="searchForm" class="searchform form-input-m">
        <vxe-form-item title="快速查询">
          <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findReagentStockList" @keyup="keyupEnter" @search-click="findReagentStockList()"></vxe-input>
        </vxe-form-item>
        <vxe-form-item title="仓库">
          <el-select v-model="searchForm.storeCode" placeholder="请选择仓库" ref="selectOrgRef" style="width:180px;" clearable @clear="clearStoreCode">
            <el-option hidden :value="searchForm.storeCode ? searchForm.storeCode : ''" :label="searchForm.storeName"></el-option>
            <el-tree filterable :data="invStoreList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleTypeNodeClick" highlight-current ref="orgTreeRef" node-key="faultTypeCode" class="tools-tree"></el-tree>
          </el-select>
        </vxe-form-item>
        <vxe-form-item title="商品">
          <VxePulldownSelectionWithNa style="width: 100%" :url="'/lis/inv/invReagent/findInvReagentList'" @confirmClick="SelectRowClick" :tableColumn="[
                          { type: 'seq', title: '#', width: '30px' },
                          { field: 'reaNo', title: '名称' },
                          { field: 'reaNa', title: '编码' }
                        ]" :aimKeys="[
                          { aimKey: 'reaNo', rowKey: 'reaNo' },
                          { aimKey: 'reaNa', rowKey: 'reaNa' }
                        ]" :displayTexts="['reaNa']" :displayTextObj="searchForm.reaNo ? searchForm.reaNa : ''" />
        </vxe-form-item>
        <vxe-form-item title="生产厂家">
          <VxePulldownSelectionWithNa style="width: 100%" :url="'/lis/inv/manufacturer/findInvManufacturerList'" @confirmClick="SelectRowClick" :tableColumn="[
                          { type: 'seq', title: '#', width: '30px' },
                          { field: 'manuName', title: '名称' },
                          { field: 'manuCode', title: '编码' }
                        ]" :aimKeys="[
                          { aimKey: 'manuName', rowKey: 'manuName' },
                          { aimKey: 'manufacturerNo', rowKey: 'manuCode' }
                        ]" :displayTexts="['manuName']" :displayTextObj="searchForm.manuName ? searchForm.manuName : ''" />
        </vxe-form-item>
        <vxe-form-item>
          <vxe-checkbox v-model="searchForm.query0Flag" size="small" content="库存为0不显示" @change="findReagentStockList"></vxe-checkbox>
        </vxe-form-item>
        <vxe-form-item>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading" @click="findReagentStockList"></vxe-button>
        </vxe-form-item>
      </vxe-form>
      <div class="tableBox">
        <vxe-table ref="invReagentTableRef" :data="reagentStocList" :loading="tloading"  :span-method="mergeRowMethod" class="mytable-scrollbar" border align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column field="reaNo" title="商品编号" width="80">
          </vxe-column>
          <vxe-column field="reaNa" title="商品名称" width="200">
          </vxe-column>
          <vxe-column field="storeName" title="仓库" width="200">
          </vxe-column>
          <vxe-column field="manufacturerName" title="生产厂家" width="150">
          </vxe-column>
          <vxe-column field="batchNum" title="批号" width="100">
          </vxe-column>
          <vxe-column field="produceDate" title="生产日期" width="100"> </vxe-column>
          <vxe-column field="expiryDate" title="失效日期" width="100"> </vxe-column>

          <vxe-column field="quantity" title="在库数量" width="100"></vxe-column>
          <vxe-column field="inQuantity" title="入库数量" width="100"></vxe-column>
          <vxe-column field="outQuantity" title="出库数量" width="100"></vxe-column>
          <vxe-column field="price" title="单价" width="100"> </vxe-column>
          <vxe-column field="unit" title="单位" width="120"> </vxe-column>

        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
let store = AppStore();

let searchForm = reactive({
  searchValue: '',
  storeCode: !isEmpty(store.curInvStoreObj) && !isEmpty(store.curInvStoreObj.storeCode) ? store.curInvStoreObj.storeCode : '',
  storeName: !isEmpty(store.curInvStoreObj) && !isEmpty(store.curInvStoreObj.storeName) ? store.curInvStoreObj.storeName : '',
  reaNo: '',
  reaNa: '',
  manufacturerNo: '',
  manuName: '',
  query0Flag: true
});

let defaultProps = {
  children: 'children',
  label: 'storeName'
};
let tloading = ref(false); //刷新加载状态
let reagentStocList: any = reactive([]);
let invStoreList: any = reactive([]);

watch(
  () => store.curInvStoreObj,
  (n: any, o: any) => {    
    // 将获取的新值动态赋给layoutcolor
    if (searchForm.storeCode != n.storeCode) {
      searchForm.storeCode = n.storeCode;
      searchForm.storeName = n.storeName;
      findReagentStockList();
    }
  },
  { deep: true, immediate: true }
);

// 方法定义区 =============
// 页面加载时更新组织机构列表(左侧)
onMounted(() => {
  findStoreManageTree();
  findReagentStockList();
});
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findReagentStockList();
  }
}
function findReagentStockList() {
  tloading.value = true;
  reagentStocList.length = 0; //放入数据前清空数据
  const url = '/inv/invReagentStock/findReagentStockList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchForm.searchValue,
        storeCode: searchForm.storeCode,
        reaNo: searchForm.reaNo,
        manufacturerNo: searchForm.manufacturerNo,
        query0Flag: searchForm.query0Flag
      }
    })
    .then((res: any) => {
      reagentStocList.push(...res.data);

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function findStoreManageTree() {
  invStoreList.length = 0;

  const url = '/inv/storeManage/findStoreManageTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        proxy.$alert(res.status.msg, '提示');
      } else {
        invStoreList.push(...res.data.invStoreTree);
      }
    })
    .catch((err: any) => {
      VxeMessage('获取机构失败', VxeNotifyType.error);
    });
}

function handleTypeNodeClick(data: any) {
  searchForm.storeCode = data.storeCode;
  searchForm.storeName = data.storeName;
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
  findReagentStockList();
}

function clearStoreCode() {
  findReagentStockList();
}

function SelectRowClick(e) {
  e.aimKeys.forEach((r) => {
    searchForm[r.aimKey] = e.row[r.rowKey];
  });
  findReagentStockList();
}

function mergeRowMethod({ row, _rowIndex, column, visibleData }) {
  const fields = ['reaNo', 'reaNa'];
  const cellValue = row[column.field];
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1];
    let nextRow = visibleData[_rowIndex + 1];
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#invReaStDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }

    .tableBox {
      height: calc(100% - 40px);
      background-color: $base-white;
    }

    .el-tabs {
      height: 100%;
      // 右侧保存按钮
      .saveBtn {
        margin: 0px 30px;
      }
    }
  }
}
</style>
